import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.less';
const prefix = 'goods-card'
import { Product } from 'src/types/Product';
interface IProps {
  item: Product
}
const GoodsCard = (props: IProps) => {
  const { item } = props;
  const { product_banner_image, product_tags = [] } = item
  const itemUrl = product_banner_image[0]?.url
  let tags = Array.isArray(product_tags) ? product_tags : [];
  let hex = tags.length > 0 ? 220 : 200

  return (
    <View className={`${prefix}`} style={{ height: `${hex}px` }} onClick={() => {
      Taro.navigateTo({ url: `pages/goodsDetail/index?id=${item.id}` })
    }}>
      <Image src={itemUrl} className={`${prefix}-image`}></Image>
      <Text numberOfLines={2} className={`${prefix}-title`}>{item.product_name}</Text>
      <Text className={`${prefix}-price`}>
        <Text className={`${prefix}-price-text`}>{item.price}</Text>
        <Text className={`${prefix}-price-unit`}> 元</Text>
      </Text>
      <View className={`${prefix}-tags`}>
        {tags.map((tag, index) => (
          <Text key={index} className={`${prefix}-tag`}>{tag}</Text>
        ))}
      </View>
    </View>
  )
}
export default GoodsCard